<template>
  <div id="integralExchange" class="integralExchange same-change-oldstyle">
    <!-- <div class="topBreadcrumb">
      <span>当前位置：</span>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/fundsManagement' }">业绩管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/withdrawdeposit' }">金额提现</el-breadcrumb-item>
        <el-breadcrumb-item>兑换</el-breadcrumb-item>
      </el-breadcrumb>
    </div> -->
    <div class="same-head-box" >
			<div class="saem-seat-box" >
				<div class="saem-seat-left">
					<span>当前位置：</span>
                     <el-breadcrumb separator-class="el-icon-arrow-right">
					    <el-breadcrumb-item :to="{ path: '/fundsManagement' }">业绩管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/withdrawdeposit' }">金额提现</el-breadcrumb-item>
        <el-breadcrumb-item>兑换</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="saem-seat-right">
					<button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
					<button class="same-search-btns" @click="returnBack">返回</button>
				</div>
			</div>
    </div>
    <div class="drawBox">
      <h4 class="four">账户积分兑换</h4>
      <div class="listsBox">
        <span class="span_l">账户金额:</span>
        <span class="balanshow">{{integral?integral:'暂无信息'}}</span>分
      </div>
      <div class="listsBox">
        <span class="span_l">提现至:</span>
        <el-select v-model="backType" placeholder="请选择" @change="choosedbacktype($event)">
          <el-option
            v-for="item in backtion"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="listsBox tixian">
        <span class="span_l">提现金额:</span>
        <el-input v-model="input" placeholder="提现金额"></el-input>元
      </div>
      <div class="listsBox">
        <span class="span_l">兑换比例:</span>
        <el-input v-model="inputdh" placeholder="integrasl_money" disabled="disabled"></el-input>
      </div>
      <div class="listsBox verifyBox">
        <span class="span_l">短信验证码:</span>
        <el-input v-model="input1"></el-input>
        <button v-if="!send_ed" class="btnb_s" @click="getverify()" type="button">{{smcodetitle}}</button>
        <button v-if="send_ed" class="btnb_s btnbs_s_other" type="button">{{count_ti}}秒后重新获取</button>
      </div>
      <div class="othersize" v-if="send_ed">验证码已发送到你绑定的手机号码:+86{{phonenum}},请注意查收</div>
      <div class="listsBox">
        <button class="btn_affirm" @click="affirm()" type="button">确认</button>
      </div>
      <div class="state">
        <p>常见问题</p>
        <p>1、账户提现手续费为3%</p>
        <p>2、如果银行信息或发票填写错误，导致提现失败，积分将退回到你的原来账户</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "integralExchange",
  data: function() {
    return {
      inputdh: "", //兑换比例e
      input: "", //input框
      input1: "", //input验证码
      backType: "", //银行卡类别
      backlist: [], //卡信息列表
      backtion: [],
      integral: "", //积分
      phonenum: "", //手机号码
      send_ed: false, //tiam
      count_ti: "",
      timer: null,
      smcodetitle: "获取验证码"
    };
  },
  computed: {},
  // 初始化执行
  created: function() {
    this.backList(); //获取银行卡信息
    this.getPartnerQuota(); //获取手机号码以及账户金额
  },
  inject: [
		'reload'
	],
	methods: {
    RefreshFun(){
      // 调用reload方法，刷新整个页面
      this.reload()
    },
    //返回
    returnBack(){
      this.$router.back(-1);
    },
    //获取验证
    getverify() {
      this.getphone(); //获取验证码;
    },
    //确认
    affirm: function() {
      if (this.backType == "") {
        this.$message.error("请选择提现至类型");
        return false;
      } else if (this.input == "" || this.input == 0) {
        this.$message.error("提现积分不能为空或者为零");
        return false;
      } else if (this.input1 == "") {
        this.$message.error("验证不能为空");
        return false;
      } else if (parseInt(this.input) > parseInt(this.integral)) {
        this.$message.error("提现积分不能大于当前积分余额");
        return false;
      }
      this.launchApplication();
    },
    //订单类型
    choosedbacktype(Type) {
      this.backType = Type;
    },
    // 获取银行卡列表
    backList: function() {
      var that = this;
      // ajax请求
      that.$post({
        url: "Partner/Bank/getBankList",
        data: {},
        success: data => {
          if (data.code == 1000) {
            that.backlist = data.data;
          }
          for (var i = 0; i < data.data.length; i++) {
            var obj = {};
            obj.value = data.data[i].bank_id;
            obj.label = data.data[i].bank_name;
            that.backtion.push(obj);
          }
        }
      });
    },
    //获取手机号码和余额
    getPartnerQuota() {
      var that = this;
      // ajax请求
      that.$post({
        url: "Partner/WaterCard/getPartnerQuota",
        data: {},
        success: data => {
          if (data.code == 1000) {
            that.phonenum = data.data.tel; //手机号码
            that.integral = data.data.integral; //用户金额
            that.inputdh = data.data.integral_money; //兑换比列
          }
        }
      });
    },
    //获取验证码 /Common/Common/sendSms
    getphone() {
      var that = this;
      var phonenum = that.phonenum;
      const time_count = 120;
      if (phonenum == "") {
        this.$message.error("手机信息有误请联系管理员");
        return false;
      }
      // ajax请求
      that.$post({
        url: "/Common/Common/sendSms",
        data: { phone: phonenum },
        success: data => {
          if (data.code == 1000) {
            that.$message.success(data.message);
            that.send_ed = true;
            if (!that.timer) {
              that.count_ti = time_count;
              that.send_ed = true;
              that.timer = setInterval(() => {
                if (that.count_ti > 0 && that.count_ti <= time_count) {
                  that.count_ti--;
                } else {
                  that.send_ed = false;
                  that.smcodetitle = "重新获取";
                  clearInterval(that.timer);
                  that.timer = null;
                }
              }, 1000);
            }
          } else {
            this.$message.error(data.message);
          }
        }
      });
    },
    //提交申请
    launchApplication() {
      var that = this;
      // ajax请求
      that.$post({
        url: "Partner/Achievement/launchApplication",
        data: {
          bank_id: that.backType,
          money: that.input
        },
        success: data => {
          if (data.code == 1000) {
            this.$message.success("申请成功");
            that.getPartnerQuota(); //重新调取余额
          } else {
            this.$message.error(data.message);
          }
        }
      });
    }
  },
  mounted() {}
};
</script>
<style>
.integralExchange {
  width: 100%;
  height: 100%;
  background: #f2f3f3;
}
.drawBox {
  display: flex;
  flex-direction: column;
  padding: 0px 40px;
}
.drawBox .listsBox {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 10px 0px;
}
.listsBox .span_l {
  width: 90px;
  display: flex;
  justify-content: flex-end;
  margin-right: 20px;
}
.listsBox .el-dropdown {
  background: #fff;
}
.listsBox .balanshow {
  color: #d81f2a;
}
.tixian .el-input {
  background: #fff;
  width: 200px;
  height: 30px;
  margin-right: 10px;
}
.listsBox .el-input__inner {
  width: 200px;
  height: 30px;
}
.othersize {
  font-size: 12px;
  color: #9b9a98;
}
.verifyBox .el-input {
  background: #fff;
  width: 120px;
  height: 30px;
}
.verifyBox .el-input__inner {
  width: 120px;
  height: 30px;
}
.verifyBox .btnb_s {
  border: none;
  padding: 0 5px;
  height: 30px;
  color: #fff;
  font-size: 14px;
  background: #275485;
  margin-left: 15px;
  border-radius: 4px;
}
.btnbs_s_other {
  background: #a8afb3 !important;
}
.listsBox .btn_affirm {
  width: 130px;
  border: none;
  height: 30px;
  color: #fff;
  font-size: 14px;
  background: #275485;
  margin: 30px 0px 0px 90px;
  border-radius: 4px;
}
.state {
  border: 1px solid #c9cac9;
  color: #585453;
  font-size: 12px;
  padding: 20px;
}
.state > p {
  margin-top: 5px;
}
</style>



